<template>
  <div style="padding: 30px 0">
    <div class="formCon">
      <div class="article-title">{{ details.title }}</div>
      <div v-html="details.content"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { article } from '@/api/api'
import {useRoute} from "vue-router";
interface detailsInterface{
  title?: string
  content?: string
}
const route = useRoute();
const details = ref<detailsInterface>({})
const getDetails = () => {
  article({
    id: route.query.id
  }).then((res:any) => {
    details.value = res.data
  })
}
getDetails()
</script>
<style scoped>
.formCon{
  width: 60%;
  background: #fff;
  margin: 15px auto;
  padding: 30px;
  box-sizing: border-box;
}
.article-title{
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px;
}
</style>